<script setup lang="ts">
import * as echarts from 'echarts'
import { nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import requests from '../util/fetchUtils'

const router = useRouter()

var option = {
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      show: true,
      color: "rgba(255, 255, 255, 0.6)"
    },
    interval: 24 * 60 * 60 * 1000
  },
  grid: {
    containLabel: true,
    top: '8%',
    bottom: 0,
    left: 0,
    right: 5
  },
  yAxis: {
    type: 'value',
    min: 390,
    axisLabel: {
      show: true,
      color: "rgba(255, 255, 255, 0.6)"
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.08)"
      }
    }
  },
  series: [
    {
      data: [
        [new Date(2023, 8, 13), 390.5627],
        [new Date(2023, 8, 14), 390.6627],
        [new Date(2023, 8, 15), 390.7627],
        [new Date(2023, 8, 16), 390.6627],
        [new Date(2023, 8, 17), 390.6627],
        [new Date(2023, 8, 18), 390.7627],
        [new Date(2023, 8, 19), 390.8627],
        [new Date(2023, 8, 20), 390.9627],
        [new Date(2023, 8, 21), 390.5627]
      ],
      type: 'line'
    }
  ]
}
const sortFollowersDescending = (data: Array<any>) => {  
    return data.sort((a, b) =>  a.follower - b.follower);  
}  

const init = () => {
  var chartDom = document.getElementById('chart-main')
  var myChart = echarts.init(chartDom)


    //请求数据
    let follower = requests<any>("/getWeekFollower/900171")
    follower.then(data => {
        let result = data.map((item: { data_time: string | number | Date; follower: any }) => {
            let date = new Date(item.data_time)
            return [date, item.follower]
        })
        console.log(sortFollowersDescending(data)[0].follower);
        
        option.yAxis.min=sortFollowersDescending(data)[0].follower
        if (Array.isArray(option.series)) {
            option.series[0].data = result 
        }
        myChart.setOption(option)
    })

  option && myChart.setOption(option)
  window.onresize = function () {
    myChart.resize()
  }
}

const fansRank = (id: number) => {
  console.log(id)

  // 并且携带店铺ID
  router.push({
    path: "/fans",
    query: {
      id: id
    }
  })
}

const totalFans = (id: number) => {
  console.log(id)

  // 并且携带店铺ID
  router.push({
    path: "/tfans",
    query: {
      id: id
    }
  })
}
onMounted(() => {
  nextTick(() => {
    init()
  })
})

const MonthData =()=>{
    var chartDom = document.getElementById('chart-main')
    var myChart = echarts.init(chartDom)

    //请求数据
    let follower = requests<any>("/getWeekFollower/492840942")
    follower.then(data => {
        let result = data.map((item: { data_time: string | number | Date; follower: any }) => {
            let date = new Date(item.data_time)
            return [date, item.follower]
        })
        option.yAxis.min=sortFollowersDescending(data)[0].follower
        if (Array.isArray(option.series)) {
            option.series[0].data = result 
        }
        myChart.setOption(option)
    })
}
</script>

<template>
  <div class="index">
    <div class="container top">
      <img class="myzone" src="../assets/img/ico_ico_home_myzone.png" alt="" srcset="">
      <div class="title">
        全部站点数据
        <img src="../assets/img/ico_ico_home_add.png" alt="" srcset="">
      </div>
      <img class="site" src="../assets/img/ico_ico_home_site.png" alt="" srcset="">
    </div>
    <div class="container">
      <div class="navigation">
        <div class="item" @click="fansRank(1)">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" @click="totalFans(1)" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
      </div>
      <div class="navigation">
        <div class="item" @click="fansRank(1)">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
      </div>
      <div class="navigation">
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
      </div>
      <div class="navigation">
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>
        <div class="item">
          <img class="icon" src="../assets/img/icon_ranking.png" alt="" srcset="">
          <div class="text">粉丝排名</div>
        </div>


      </div>
    </div>
    <div class="img-title">
      <div class="text">粉丝变化情况</div>
    </div>
    <div class="container">
      <div class="fans-condition">
        <div class="text-button">
          <div class="item active">涨粉最快</div>
          <div class="item">跌粉最快</div>
        </div>
        <div class="up-box">
          <img class="face" src="https://i1.hdslb.com/bfs/face/ae16880a3ccba26a2461a04b31ab7f98061cc576.jpg"
            referrerPolicy="no-referrer" crossorigin="anonymous" alt="">
          <div class="up-name">★⑥檤轮囬★</div>
        </div>
        <div id="chart-main" style="width: 9.4667rem;height:4.2667rem; margin: 0 auto;">

        </div>
        <div class="date-nav">
          <div class="item active">近7天</div>
          <div class="item">近15天</div>
          <div class="item" @click="MonthData()">近1个月</div>
          <div class="item">近3个月</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
@import url(../assets/css/base.less);

.index {
  width: 10rem;
  margin: 0 auto;

  .top {
    display: flex;
    align-items: center;
    padding-bottom: .5333rem;

    img {
      display: block;
      width: .8rem;
      height: .8rem;
    }

    .myzone {
      margin-left: .5333rem;
      margin-right: .2133rem;
    }

    .title {
      width: 6.9333rem;
      height: 1.1733rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: @heading-color;
      font-size: .48rem;
      background-image: url(../assets/img/img_titlebar_home.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      img {
        margin-left: 1.1467rem;
        margin-right: .1067rem;
      }
    }

    .site {
      margin-left: .1867rem;
    }


  }

  .navigation {
    width: 8.7467rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: .5333rem;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 1.28rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
      }

      .text {
        font-size: .32rem;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        margin-top: .2133rem;
      }

      &:not(:first-child) {
        margin-left: .5867rem;
      }
    }

  }

  .img-title {
    width: 10rem;
    height: 1.0667rem;
    background: url(../assets/img/img_title_normal.png) no-repeat;
    background-size: contain;
    margin-top: .2667rem;

    .text {
      font-size: .3733rem;
      color: white;
      margin-left: .7467rem;
      height: 1.0667rem;
      line-height: 1.0667rem;
    }
  }

  .text-button {
    display: flex;
    margin-left: .2667rem;
    padding-top: .5333rem;

    .item {
      width: 1.7067rem;
      height: .64rem;
      background: linear-gradient(135deg, rgba(0, 36, 72, 1) 0.01%, rgba(13, 73, 133, 1) 50.37%, rgba(0, 36, 72, 1) 100%);
      box-shadow: inset 0px -0.0133rem 0px rgba(75, 194, 255, 0.5), inset 0px .0133rem 0px rgba(75, 194, 255, 0.5), inset -0.0133rem 0px 0px rgba(75, 194, 255, 0.5), inset 0px 0px .16rem rgba(255, 255, 255, 0.6);
      /** 文本1 */
      font-size: .32rem;
      line-height: .64rem;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;

      &.active {
        background: linear-gradient(135deg, rgba(15, 99, 184, 1) 0.01%, rgba(27, 160, 228, 1) 50.37%, rgba(15, 99, 184, 1) 100%);
        box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.8);
      }
    }
  }

  .up-box {
    display: flex;
    margin-left: .5333rem;
    margin-top: .2667rem;
    margin-bottom: .2667rem;

    .face {
      display: block;
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      border: 0.5px solid @heading-color;
      margin-right: .2667rem;
    }

    .up-name {
      font-size: .4267rem;
      line-height: .8rem;
      text-align: center;
    }
  }

  .date-nav {
    display: flex;
    margin-top: .5333rem;
    padding-bottom: .6133rem;
    justify-content: center;

    .item {
      font-size: .32rem;
      height: .64rem;
      background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41, 86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
      border: .0133rem solid rgba(75, 194, 255, 0.2);
      box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
      line-height: .64rem;
      padding-left: .2667rem;
      padding-right: .2667rem;

      &:not(:last-child) {
        margin-right: .5333rem;
      }

      &.active {
        background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37, 68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
        border: .0133rem solid rgba(75, 194, 255, 0.6);
      }
    }
  }
}
</style>